<template>
<div>
	<div class="g_top_box">
		<div class="g_right_box">
			<Button type="primary" @click="$router.push({name:'article_add'})">添加</Button>
		</div> 
		<div class="g_left_box"><h4>文章列表</h4></div>
	</div>
	
	<div class="g_list_box">
		<div class="g_filter_box">
			<Form ref="formDynamic" :label-width="50" style="width: 100%">
				<Input v-model="filter.title" placeholder="标题" style="width:130px;"></Input>
				<Button type="primary" @click="qurey">搜索</Button>
			</Form>
		</div>
		<div class="g_list_box">
			<Table :columns="Columns" :data="list" style="width: 100%;"></Table>
		</div>
		<div class="g_page_box">
			<Page :total="count" @on-change="goto_page"></Page>
		</div>
	</div> 
</div>
</template>

<script>
export default {
    name: 'article_list',
    data () {
		let vm = this;
        return {
            Columns: [
				{
					title: 'ID',
					key: 'id',
					align: 'center',
                    width: 50
                },
				{
                    title: '标题',
					key: 'title',
                },
				{
                    title: '图片',
					key: 'img',
					width: 140,
					align: 'center',
					render: (h, params) => {
						return h('div',{
								style:{
									width:'100px',
									height:'60px',
									margin:'10px',
									overflow:'hidden'
								}
							},[
							h('img',{
								attrs:{
									src:params.row.img
								},
								style:{
									width:'100%'
								}
							})
						]);
					}
                },
				{
                    title: '添加时间',
					key: 'addtime',
					width: 150,
					align: 'center',
                },
				{
					title: '操作',
					key: 'action',
					width: 300,
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'primary',
									size: 'small',
									icon:'edit'
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										
										this.$router.push({name:'article_info',params:{'id':params.row.id}});
										//this.show(params.index)
									}
								}
							}, '编辑'),
							h('Button', {
								props: {
									type: 'error',
									size: 'small',
									icon:'trash-a'
								},
								style: {
									
								},
								on: {
									click: () => {
										this.remove(params.index)
									}
								}
							}, '删除')
						]);
					}
				}
            ],
            list: [],
			count:0,
			page:1,
			filter:{
				title:''
			}
        };
    },
	created(){
		
		this.load_data();
	},
    computed: {
       
    },
	methods:{
		load_data(){
			var self = this;
			
			var postdata = {
				f:this.filter,
				page:this.page
			}
			
			Whttp.load('Article/Article/get_list',postdata,function(result){
				self.list = result.list;
				self.count = parseInt(result.count);
			});
		},
		remove(id){
			if(!confirm('是否删除')){
				return;
			}
			var self = this;
			var postdata = {
				id:id
			};
			Whttp.load('Article/Article/del',postdata,function(result){
				self.load_data();
			});
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		qurey(){
			this.page = 1;
			this.load_data();
		}
	}
};
</script>
